<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link
        v-for="(item, index) in foot"
        :key="index"
        :to="`/home/${item.path}`"
      >
        <van-icon :name="item.meta.icon" />
        <b>{{ item.meta.title }}</b>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      foot: [
        {
          path: "home",
          name: "Home",
          meta: {
            title: "首页",
            icon: "wap-home-o",
          },
        },
        {
          path: "classfy",
          name: "Classfy",
          meta: {
            title: "分类",
            icon: "wap-home-o",
          },
        },
        {
          path: "message",
          name: "Message",
          meta: {
            title: "信息",
            icon: "wap-home-o",
          },
        },
        {
          path: "shopcar",
          name: "Shopcar",
          meta: {
            title: "购物车",
            icon: "wap-home-o",
          },
        },
        {
          path: "my",
          name: "My",
          meta: {
            title: "我的",
            icon: "wap-home-o",
          },
        },
      ],
    };
  },
};
</script>
<style lang="scss">
.router-link-active {
  color: red;
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
html,
body,
#app,
.home {
  width: 100%;
  height: 100%;
}
.home {
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    overflow-y: scroll;
  }
  footer {
    width: 100%;
    height: 60px;
border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .van-icon {
        font-size: 30px;
      }
    }
    .router-link-active {
      color: #f06;
      .van-icon {
        color: #f06;
      }
    }
  }
}
</style>
